<template>
    <div style="">
        <my-simple-table>

            <my-simple-tr label="基础功能">
                <el-date-picker
                        v-model="value"
                        type="datetime"
                        placeholder="选择日期">
                </el-date-picker>
            </my-simple-tr>

            <my-simple-tr label="带快捷选项">
                <el-date-picker
                        v-model="value"
                        type="datetime"
                        placeholder="选择日期"
                        align="right"
                        :picker-options="pickerOptions">
                </el-date-picker>
            </my-simple-tr>

            <my-simple-tr label="设置默认值">
                <el-date-picker
                        v-model="value"
                        type="datetime"
                        placeholder="选择日期"
                        align="right"
                        default-value="2020-06-21 12:00:00">
                </el-date-picker>
            </my-simple-tr>

            <my-simple-tr label="日期和时间范围">
                <el-date-picker
                        v-model="value1"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="rangePickerOptions">
                </el-date-picker>
            </my-simple-tr>

            <my-simple-tr label="日期和时间范围">
                <el-date-picker
                        v-model="value"
                        type="datetimerange"
                        align="right"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['12:00:00', '08:00:00']">
                </el-date-picker>
            </my-simple-tr>


        </my-simple-table>
    </div>
</template>

<style>
</style>

<script>

    export default {
        name: "my-el-input-number",
        data() {
            return {
                value: '',
                value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
                pickerOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                rangePickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
            };
        },
        methods: {}
    }
</script>

